<h4>English: (global)</h4>
<ng-container *transloco="let t">
  <p data-cy="global">{{ t('home') }}</p>
</ng-container>

<h4>Spanish: (inline lang, scope: lazy-page)</h4>
<ng-container
  *transloco="let t; lang: 'es'; loadingTpl: loading; scope: 'lazy-page'"
>
  <p data-cy="with-scope">{{ t('lazyPage.title') }}</p>
</ng-container>

<app-provider-lang />

<h4>Static Lang: <code>es</code></h4>
<ng-container *transloco="let t; lang: 'es|static'; loadingTpl: loading">
  <p>{{ t('home') }}</p>
</ng-container>

<h4>Static Lang with scope <code>lazy-page/es</code></h4>
<ng-container
  *transloco="let t; lang: 'es|static'; loadingTpl: loading; scope: 'lazy-page'"
>
  <p>{{ t('lazyPage.title') }}</p>
</ng-container>

<ng-template #loading>Loading..</ng-template>
